<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"


      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <ui:composition template="template.xhtml">
        <ui:define name="content">

            <p:panel style="width: 100%!important; " header="RED SOCIAL">
                <h:form id="formCarrito">
                    <p:notificationBar position="top" effect="slide" styleClass="top" widgetVar="bar">
                        <h:outputText value="Lista de amigos interezados" style="font-size:26px;" />
                    </p:notificationBar>
                    <p:notificationBar position="top" effect="slide" styleClass="top" widgetVar="rar">
                        <h:outputText value="Lista productos que le gustan a tu amigo" style="font-size:26px;" />
                    </p:notificationBar>
                    <h:panelGrid columns="3" style="width:100%;">
                        <p:carousel value="#{amigosController.amigos}" 
                                    var="car" numVisible="8"
                                    itemStyleClass="carItem" style="width: 100%!important;" circular="true">
                            <f:facet name="header">
                                <h:panelGrid columns="3">
                                    <span class="ui-separator">
                                        <span class="ui-icon  ui-icon-grip-dotted-vertical" />
                                    </span>
                                    <h:outputText value="Tus amigos" style="font-weight: bold; color: cadetblue"/> 
                                </h:panelGrid>
                            </f:facet>
                            <h:panelGrid columns="2"  cellpadding="2" columnClasses="lbel,vlue" >
                                <f:facet name="header">
                                    <p:graphicImage value="Eshopper/images/shop/product10.png" width="60" height="60"/> 
                                </f:facet>
                                <h:outputText value="Id:" style="font-weight: bold; color: #0480be"/>
                                <h:outputText value="#{car.id}" />
                                
                                <h:outputText value="Nombres:" style="font-weight: bold; color: #0480be"/>
                                <h:outputText value="#{car.nombres}" />

                                <h:outputText value="Username:" style="font-weight: bold; color: #0480be"/>
                                <h:outputText value="#{car.username}"/>

                                <h:outputText value="Interezados" style="font-weight: bold; color: #0480be"/>

                            </h:panelGrid>

                            <f:facet name="footer">
                                Son #{amigosController.amigos.size()} amigos encontrados.
                            </f:facet>
                        </p:carousel>                           
                    </h:panelGrid>
                    <p:carousel value="#{carritoController.recomenProductos}" 
                                var="car" numVisible="5"
                                itemStyleClass="carItem" style="width: 100%!important; height: 100px" circular="true">
                        <f:facet name="header">
                            <h:panelGrid columns="3">
                                <p:selectOneMenu id="selectOneMenuResponsable" value="#{carritoController.filtrador}" 
                                                 >
                                    <f:selectItems value="#{carritoController.groupThemes}"
                                                   var="usuarioItem"
                                                   itemValue="#{usuarioItem}"
                                                   itemLabel="#{usuarioItem}"/>
                                </p:selectOneMenu>
                                <span class="ui-separator">
                                    <span class="ui-icon  ui-icon-grip-dotted-vertical" />
                                </span>
                                <h:outputText value="Productos" style="font-weight: bold; color: #CE3C2D"/> 
                            </h:panelGrid>
                        </f:facet>
                        <h:panelGrid columns="2"  cellpadding="5" columnClasses="label,value" >
                            <f:facet name="header">
                                <p:graphicImage value="Eshopper/images/shop/product8.png" width="60" height="60"/> 
                            </f:facet>
                            <h:outputText value="Titulo:" style="font-weight: bold; color: #0480be"/>
                            <h:outputText value="#{car.title}" />

                            <h:outputText value="ASIN:" style="font-weight: bold; color: #0480be"/>
                            <h:outputText value="#{car.ASIN}" />

                            <h:outputText value="Grupo:" style="font-weight: bold; color: #0480be"/>
                            <h:outputText value="#{car.group}"/>

                            <h:outputText value="Rango_Precio:" style="font-weight: bold; color: #0480be"/>
                            <h:outputText value="#{car.salesrank}" />

                            <h:outputText value="Valoracion:" style="font-weight: bold; color: #0480be"/>
                            <p:rating value="#{productosController.conversion(car.avg_rating)}" readonly="false" disabled="true"/>

                            <h:outputText value="Descargas:" style="font-weight: bold; color: #0480be"/>
                            <h:outputText value="#{car.downloaded}" />
                            <span class="ui-separator">
                                <span class="ui-icon  ui-icon-grip-dotted-vertical" />
                            </span>
                            <p:commandButton id="createButton" icon="ui-icon-plus" 
                                             actionListener="#{carritoController.agregar(car)}" 
                                             update=":formCarrito:datalist"
                                             value="Agregar"  />

                            <f:facet name="footer">
                                <h:panelGrid columns="3">

                                </h:panelGrid>
                            </f:facet>
                        </h:panelGrid>

                        <f:facet name="footer">
                            Son #{carritoController.recomenProductos.size()} productos encontrados.
                        </f:facet>
                    </p:carousel>
                </h:form>
            </p:panel>
        </ui:define>
    </ui:composition>

</html>




